<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('详情信息')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="700px" @close='close'>
    <el-table size='mini' ref="multipleTable" :data="tableData" max-height="500px" top='20vh' style="width: 100%">
      <el-table-column label="IP" align='center' min-width="150px">
        <template slot-scope="scope">
          <tooltip :copyText="ipShow(scope.row)" class="wid190"></tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('访问控制')" align='center' width="100px">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.AccessControl" class="wid190"></tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('地址对象')" align='center' min-width="150px">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.addr_object.join('<br>')" class="wid190"></tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('服务对象')" align='center' min-width="150px">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.service_object" class="wid190"></tooltip>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'reDialog',
  data () {
    return {
      dialogVisible: false,
      tableData: []
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      this.tableData = data
    },
    ipShow (row) {
      return `${row.ServerProtocol[0].toUpperCase()} | ${row.ServerIp[0]}${row.ServerPort ? (' | ' + row.ServerPort[0]) : ''}`
    },
    close () {
      this.dialogVisible = false
      this.tableData = []
    }
  }
}
</script>
